<template>
  <div>
    <div class="padding bg-white">
      <el-checkbox-group v-model="checked">
        <el-checkbox
          v-for="item in energyTypeOptions"
          :key="item.energyType"
          :label="item.energyType"
        >
          {{ item.name }}
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <el-table
      class="white-space-nowrap"
      :data="lists"
      lazy
      :load="loadMore"
      row-key="uuid"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      :header-cell-style="{
        backgroundColor: themeColor,
        color: 'white'
      }"
    >
      <el-table-column
        v-for="(column, index) in columns"
        :key="column.prop"
        :fixed="index === 0"
        :width="index === 0 ? 260 : null"
        :class-name="index === 0 ? 'table-first-column' : ''"
        v-bind="column"
        :align="index === 0 ? 'left' : 'center'"
      >
        <template v-if="needWrapUnit(column.label)" #header>
          <div class="wrap-unit-in-thead-name">{{ wrapUnit(column.label).name }}</div>
          <div class="wrap-unit-in-thead-unit">{{ wrapUnit(column.label).unit }}</div>
        </template>
        <template v-if="column.prop === 'districtName'" #default="{ row }">
          <el-link
            v-if="!row.hasChildren"
            :underline="false"
            type="primary"
            style="font-size: 12px"
            class="text-truncate"
            :title="row.districtName"
            @click="navigateToEnterpriseAnalysis(row, 'enterpriseCode')"
          >
            {{ row.districtName }}
          </el-link>
          <span class="text-truncate" v-else>{{ row.districtName }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Navigate2enterpriseAnalysis from '@/mixins/navigate2enterpriseAnalysis';
import MixinWrapUnitInThead from '@/mixins/wrap-unit-in-thead';
import { uuid } from '@/utils';

export default {
  name: 'regional-table',
  mixins: [Navigate2enterpriseAnalysis, MixinWrapUnitInThead],
  props: {
    title: String,
    energyTypeOptions: {
      type: Array,
      default() {
        return [];
      }
    },
    data: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    const energyTypeOptions = this.energyTypeOptions || [];
    return {
      checked: energyTypeOptions[0] ? [energyTypeOptions[0].energyType] : []
    };
  },
  computed: {
    themeColor() {
      return this.$store.state.user.theme;
    },
    checkbox() {
      return this.energyTypeOptions.map(v => v.energyType);
    },
    columns() {
      return this.data.thead;
    },
    lists() {
      const keys = ['districtCode', 'districtName'];
      (this.data.tbody || []).forEach(item => {
        Object.keys(item).forEach(key => {
          if (!keys.includes(key)) {
            item[key] = item[key] || '-';
          }
        })
      })
      return (this.data.tbody || []).map(item => ({
        ...item,
        uuid: uuid(),
        children: [],
        hasChildren: true,
      }));
    }
  },
  watch: {
    checked: {
      deep: true,
      handler(val) {
        this.$emit('change', val);
      }
    }
  },
  methods: {
    loadMore(tree, treeNode, resolve) {
      this.$emit('loadMore', tree, treeNode, resolve);
    }
  }
};
</script>
